<style>
page{
	 background: #fafafa;
}
.g-tab-box{
	height: 72upx;
	line-height: 72upx;
	width: 100%;
	border-bottom: 2upx solid #f5f5f5;
}
.m-tab-title{
	width: 33%;
	text-align: center;
	font-size: 30upx;
	float: left;
}
.u-tab-act{
	width: 54upx;
	height: 5upx;
	background: #d71611;
	margin: 0 auto;
	position: relative;
    top: -2.8upx;
}
.g-list-box{
	width: 100%;
	height: 100%;
}
.m-list-view{
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.m-item{
	width: 100%;
	height: 160upx;
	border-bottom: 1px solid #dcdcdc;
	display: flex;
	align-items: center;
	padding: 20upx;
}
.m-row{
	width: 695upx;
	margin: 0 auto;
	margin-top: 30upx;
}
.m-item image{
	width: 122upx;
	height: 122upx;
}
.m-row-user{
	margin-left: 31upx;
}
.u-username{
	font-size: 30upx;
}
.u-last-login{
	font-size: 26upx;
	color: #9c9c9c;
	margin-top: 10upx;
}
.m-row-user .color{
	color: #828080;
}
</style>

<template>
	<view>
		<view class="g-list-box">
			<view class="m-list-view">
				<view class="m-item" v-for="(item,index) in data" :key="index">
					<image :src="item.head_pic"></image>
					<view class="m-row-user">
						<view class="u-username">{{item.name}}</view>
						<view class="u-username color">ID:{{item.user_id}}</view>
						<view class="u-username color">{{item.mobile}}</view>
						<view class="u-last-login">最近登录：{{item.last_time}}</view>
					</view>
				</view>
			</view>
			<view class="m-b-loading" v-if="showLoading">
				<image src="../../static/images/loading2.gif" mode="widthFix"></image>
			    <text>加载中</text>
			</view>
			<view class="m-no-data" v-if="showNodata">
				<image src="../../static/images/no_data.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>
<script>
    import henglang from '@/common/common.js';
	
	export default {
		data() {
			return {
                showLoading: false,
                showNodata: false,
				type: 0,
                page: 1,
                data: [],
				totalPages: 1
			};
		},
        methods: {
            toggle(e) {
                this.type = e.currentTarget.dataset.index;
            },
            request(type) {
                let that = this;
				that.showLoading = true;
				if(!henglang.checkLogin()){
					that.showLoading = false;
					that.showNodata = true;
					return
				}
				if(that.page <= that.totalPages){
					henglang.get('member/getChildrenMember',{page: that.page},true,function(res){
						that.showLoading = false;
						if(res.data.count !== 0 ){
							uni.setNavigationBarTitle({
								title: '享宝好友（' + res.data.count + '）'
							})
						}
						if (!res.data.data.length) {
							 that.showNodata = true;
						}
						if (type == 'plus') {
							that.data = that.data.concat(res.data.data);
						} else {
							that.data = res.data.data;
							that.totalPages = res.data.total_pages;
						}
					});
				}else{
					that.showLoading = false;
				}
            }
        },
        onReady() {
            this.request();
        },
        onReachBottom() {
            this.page = ++this.page;
            this.showLoading = true;
            this.request('plus');
        }
	}
</script>

